<!-- 知乎首页内部头部菜单条 -->
<template>
  <div id="home-head">
    <div class="head">
      <!-- logo图标 -->
      <div class="head_logo_box">
        <router-link to="/home"><img src="../assets/zhihu_icon.png" class="head_logo" alt=""></router-link>
      </div>
      <!-- 几个选项 -->
      <div class="head_select_box">
        <!-- 首页按钮 -->
        <div @click="selectBtn=1"><router-link to="/home" class="head_btn_box_link" :style="selectBtn==1 ? selectBorder : ''"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectBtn==1 ? selectStyle : none">首页</span></div></router-link></div>
        <!-- 发现按钮 -->
        <div @click="selectBtn=2"><router-link to="/find" class="head_btn_box_link" :style="selectBtn==2 ? selectBorder : ''"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectBtn==2 ? selectStyle : none">发现</span></div></router-link></div>
        <!-- 话题按钮 -->
        <div @click="selectBtn=3"><router-link to="/talk" class="head_btn_box_link" :style="selectBtn==3 ? selectBorder : ''"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectBtn==3 ? selectStyle : none">话题</span></div></router-link></div>
      </div>
      <!-- 查询框区域 -->
      <div class="head_search_box">
        <div class="search_box">
          <input type="text" placeholder="搜索" class="search_input"/>
          <div class="btn_search_box">
            <img src="../assets/search_icon.png" class="btn_search">
          </div>
        </div>
      </div>
      <!-- 通知按钮 -->
      <div class="notice_menu_box"></div>
      <!-- 头部用户头像按钮 -->
      <div class="user_menu_box">
        <div class="user-down-menu-box">
          <div class="user-menu-child-head-img-box">
            <img src="../assets/user-sex-male.png" alt="" style="height: 40px; width: 40px; float: left">
            <span class="user-menu-child-head-name">用户名字</span>
          </div>
          <div class="user-menu-child-head-link-box">
            <router-link to="/user" class="user-menu-child-head">基本资料</router-link>
            <router-link to="/user" class="user-menu-child-head">实名认证</router-link>
            <router-link to="/user" class="user-menu-child-head">安全设置</router-link>
          </div>
          <div class="personal-menu-child-body-box">
            <router-link to="/user" class="user-menu-child-body">权限查看</router-link>
            <router-link to="/user" class="user-menu-child-body">安全检查</router-link>
            <router-link to="/user" class="user-menu-child-body">会员权益</router-link>
            <router-link to="/user" class="user-menu-child-body">会员积分</router-link>
          </div>
          <div><div class="user-menu-child-exit" @click="doExit">退出知乎平台</div></div>
        </div>
        <router-link to="/user" class="user-menu-box-link"><img src="../assets/user-sex-male.png" class="user-menu-img" alt=""></router-link>
      </div>
      <!-- 私信按钮 -->
      <div class="letter_menu_box">
<!--        <div class="letter-down-menu-box">-->
<!--          <div class="user-menu-child-head-img-box">-->
<!--            <img src="../assets/write_idea.png" alt="" style="height: 40px; width: 40px; float: left">-->
<!--            <router-link to="/letter"><span class="user-menu-child-head-name">进入私信界面</span></router-link>-->
<!--          </div>-->
<!--        </div>-->
        <router-link to="/letter" class="user-menu-box-link"><img src="../assets/write_idea.png" class="letter-menu-img" alt=""></router-link>
      </div>
      <!-- 通知按钮 -->
      <div class="notice_menu_box">
<!--        <div class="notice-down-menu-box">-->
<!--          <div class="user-menu-child-head-img-box">-->
<!--            <img src="../assets/notice_icon.png" alt="" style="height: 40px; width: 40px; float: left">-->
<!--            <router-link to="/notice"><span class="user-menu-child-head-name">进入通信界面</span></router-link>-->
<!--          </div>-->
<!--        </div>-->
        <router-link to="/notice" class="user-menu-box-link"><img src="../assets/notice_icon.png" class="notice-menu-img" alt=""></router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home-head',
  el: '#home-head',
  components: {
  },
  data () {
    return {
      selectStyle: [{'font-weight': 'bold'}, {'color': '#444'}],
      selectBorder: {'border-bottom': '3px solid #0084ff'}
    }
  },
  props: ['selectBtn'],
  computed: {
  },
  methods: {
    returnEnter () {
      window.location.href = 'http://localhost:8080/'
    },
    doExit () {
      this.$store.commit('isLogin', '0')
      this.$router.push({path: '/login'})
    }
  }
}
</script>

<style scoped>
  @import '../../../../static/css/home/HomeHead.css';
</style>
